import { HookTypeScriptHints } from '../../components'
import { Link } from '@brillout/docpress'

The `route` config determines the page's <Link text="routing" href="/routing" />.

```js
// /pages/product/+config.js

export default {
  route: '/product/@id'
}
```

```js
// /pages/product/+Page.jsx

export default Page

/* This page can have URLs such as:
   /product/12345
   /product/macbook-pro
   /product/iPhone42
   ...
*/
function Page() {
  return <>
    <h1>Product Information</h1>
    {/* ... */}
  </>
}
```

Instead of a Route String, you can also define a Route Function:

```js
// /pages/product/+route.js

export { route }

function route(pageContext) {
  const parts = pageContext.urlPathname.split('/')
  if (parts[1] !== 'product') {
    return false
  } else {
    return {
      routeParams: {
        id: parts[2]
      }
    }
  }
}
```

## TypeScript

```ts
export { route }

import type { RouteSync } from 'vike/types'

const route: RouteSync = (pageContext): ReturnType<RouteSync> => {
  // ...
}
```

<HookTypeScriptHints hookTypeName="RouteSync" />

See also:
 - <Link href="/routing" />
 - <Link href="/route-string" />
 - <Link href="/route-function" />
 - <Link href="/filesystem-routing" />
